<template>
  <div class="data_table">
    <div ref="mychart" id="mychart"></div>
  </div>
</template>

<script>
  import * as echarts from "echarts"

  import { dataTableMethods } from 'common/mixin'

  export default {
    name: 'data_table_pie',
    mixins: [ dataTableMethods ],
    mounted() {
      // 1.初始化
      let myEcharts = echarts.init(this.$refs.mychart)
      // 2.设置 echarts 数据
      let xdata = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
      let ydata = [120, 90, 100, 140, 150, 125, 130, 90, 120, 100, 160, 150];
      let ydata_clothes = [40, 20, 50, 30, 80, 50, 60, 30, 60, 40, 90, 70];
      let ydata_beautyProducts = [20, 30, 0, 10, 60, 20, 30, 20, 40, 60, 30, 50];

      // 3.设置配置项
      let option = {
        visualMap: {
          show: false,
          type: 'continuous',
          seriesIndex: 0,
          min: 40, // TODO: 根据传入的 ydata 最大和最小值动态设置
          max: 240
        },
        title: {
          text: "年开销分析",
          textStyle: {
            fontSize: this.fontSize(18)
          }
        },
        // 提示框
        tooltip: {
          trigger: 'axis',
          textStyle: {
            fontSize: this.fontSize(14)
          },
          position: this.changePosition()
        },
        // 开启图例
        legend: {
          left: "right",
          itemGap: this.fontSize(12),
          itemHeight: this.fontSize(12),
          textStyle: {
            fontSize: this.fontSize(12)
          }
        },
        xAxis: [
          {
            data: xdata,
            axisLabel: {
              fontSize: this.fontSize(12)
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              fontSize: this.fontSize(12)
            }
          }
        ],
        series: [
          {
            name: "全部",
            type: "line", // 折线图
            data: ydata,
            color: '#F26A62',
            symbol: 'circle'
          },
          {
            name: "衣装",
            type: "line",
            color: '#5EE0A7',
            data: ydata_clothes,
            symbol: 'circle'
          },
          {
            name: "美妆",
            type: "line",
            color: '#44BEC2',
            data: ydata_beautyProducts,
            symbol: 'circle'
          }
        ]
      }
      // 4.绘制图表
      myEcharts.setOption(option)

      // 5.随浏览器窗口变动，变化大小
      window.onresize = function() {
        myEcharts.resize();
      }
    },
    methods: {
      // 图标内 px 单位换算
      fontSize(size,defalteWidth = 414) {
        let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
        if (!clientWidth) return size;
        let scale = (clientWidth / defalteWidth);
        return Number((size * scale).toFixed(3));
      }
    }
  }
</script>

<style scoped>
  .data_table {
    margin: 0 auto;
    width: 90%;
    height: 0;
    padding-bottom: 100%;
    position: relative;
  }

  #mychart {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 10px;
    border: 1px solid #eee;
  }
</style>
